<template>
    <div>
        <div style="height: 3rem"></div>
        <div class="Tabbar">
            <van-tabbar route>
                <van-tabbar-item to="/" info="">
                    <span>首页</span>
                    <img
                        v-if="props.active"
                        slot="icon"
                        slot-scope="props"
                        src="~/assets/images/index/tabbar1_active.png"
                    />
                    <img
                        v-else
                        slot="icon"
                        src="~/assets/images/index/tabbar1.png"
                    />
                </van-tabbar-item>
                <van-tabbar-item to="/quizdata" info="">
                    <span>问题库</span>
                    <img
                        v-if="props.active"
                        slot="icon"
                        slot-scope="props"
                        src="~/assets/images/index/tabbar2_active.png"
                    />
                    <img
                        v-else
                        slot="icon"
                        src="~/assets/images/index/tabbar2.png"
                    />
                </van-tabbar-item>
                <van-tabbar-item to="/cswd" info="">
                    <span>小竹问答</span>
                    <img
                        v-if="props.active"
                        slot="icon"
                        slot-scope="props"
                        src="~/assets/images/index/tabbar3_active.png"
                    />
                    <img
                        v-else
                        slot="icon"
                        src="~/assets/images/index/tabbar3.png"
                    />
                </van-tabbar-item>
                <van-tabbar-item to="/user" info="">
                    <span>个人</span>
                    <img
                        v-if="props.active"
                        slot="icon"
                        slot-scope="props"
                        src="~/assets/images/index/tabbar4_active.png"
                    />
                    <img
                        v-else
                        slot="icon"
                        src="~/assets/images/index/tabbar4.png"
                    />
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            active: 0,
        };
    },
    mounted() {},
    computed: {},
    methods: {},
};
</script>

<style lang="scss" scoped>
.Tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 3rem;
    z-index: 999;
}

::v-deep .van-tabbar-item__icon img {
    height: 24px;
}

::v-deep .van-tabbar-item {
    font-size: 14px;
}
</style>